$(function () {
    initArtCateList()
    //获取数据并渲染
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.Id}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                        <button data-id='${ele.Id}' class="btnEdit layui-btn-xs layui-btn">修改</button>
                        <button  data-id='${ele.Id}' class="btnDel layui-btn-xs layui-btn-danger layui-btn">删除</button>
                        </td>
                    </tr>
      
                `)

            });
            $('tbody').empty().html(arr.join(''))






        })
    }
    //添加文章分类和弹出层
    //弹出层的索引 
    let indexAdd = 0
    $("#btnAdd").on('click', function () {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: '添加文章分类',
            content:
                `
                <form id='formAdd'   class="layui-form" action="">
                <div class="layui-form-item">
                  <label class="layui-form-label">分类名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">分类别名</label>
                  <div class="layui-input-block">
                    <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>
                </form>
                  
                `
        });



    })
    //事件委托给添加文章弹出层添加提交事件
    $("body").on('submit', '#formAdd', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜您添加文章分类成功')
            //重新渲染页面
            initArtCateList()
            //可有可无
            $('#formAdd')[0].reset()
            //关闭弹出层
            layer.close(indexAdd)
        })

    })
    //修改弹出层搭建
    let indexEdit = 0
    $("tbody").on('click', '.btnEdit', function () {
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: '修改文章分类',
            //    添加一个隐藏域用来存放id值
            content:
                `
            <form lay-filter='formEdit' id='formEdit' class="layui-form" action="">
        
            <input type="hidden" name="Id">
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">分类别名</label>
              <div class="layui-input-block">
                <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button  class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                 
                </div>
              </div>
            </form>
              
            `
        });
        let id = $(this).attr('data-id')
        // console.log(id);
        axios({
            method: 'GET',
            url: '/my/article/cates/' + id

        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            layui.form.val('formEdit', res.data.data)
        })

    })
    // 事件委托给修改文章弹出层添加提交事件  
    $("body").on('submit', '#formEdit', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜您修改文章分类成功')
            //重新渲染页面
            initArtCateList()
            //可有可无
            $('#formEdit')[0].reset()
            //关闭弹出层
            layer.close(indexEdit)
        })

    })
    //点击删除按钮，删除相应的行
    $("tbody").on('click', '.btnDel', function () { 
    let id = $(this).attr('data-id')
    // console.log(id);
    layer.confirm('确定要删除吗？', {icon: 3, title:'提示'}, function(index){

         axios({
        method: 'GET',
        //冒号必须省略，/不能省略
        url: '/my/article/deletecate/' + id
    }).then(res => {
        if (res.data.status !== 0) {
            return layer.msg(res.data.message)
        }
        layer.msg(res.data.message)
        initArtCateList()
    })
        layer.close(index);
      });   
   
        
    })
    






})